<template>
    <div class="main">
        <a-form style="margin: 0 0 10px;" ref="formRef" :model="form" layout="inline" @submit="handlerSearch">
            <a-row :gutter="24">
                <a-col :span="24">
                    <a-form-item field="邮箱" label="邮箱" label-col-flex="auto" :label-col-style="{ width: '100px' }">
                        <a-input :style="{ width: '100%' }" placeholder="请输入邮箱" allow-clear v-model="form.phone" />
                    </a-form-item>
                </a-col>
            </a-row>
            <div class="text-center mt-5 w-full">
                <a-space size="medium">
                    <a-button type="primary" html-type="submit">
                        <template #icon><icon-search /></template>
                        搜索
                    </a-button>
                </a-space>
            </div>
        </a-form>
        <a-table :columns="columns" :data="tableData" :pagination="pagination" @page-change="changePage">
            <template #image="{ record }">
                <a-tooltip content="查看图片">
                    <a-link @click="preview_image(record.cover)"><icon-image /> 查看图片</a-link>
                </a-tooltip>
            </template>
            <template #optional="{ record }">
                <a-space>
                    <a-button type="text" @click="edit(record)"><template #icon><icon-edit /></template>调节账户</a-button>
                </a-space>
                <a-popconfirm @ok="delete_item(record.id)" content="确定要删除该数据吗?" position="bottom">
                    <a-button type="text" status="danger"><template #icon><icon-delete /></template>删除</a-button>
                </a-popconfirm>
            </template>
        </a-table>

        <a-image-preview :src="img_url" v-model:visible="preview_show" />
        <a-modal :width="1000" :visible="show" unmount-on-close @ok="save" @cancel="show = false">
            <template #title>
                <span>调节账户</span>
            </template>
            <DataModal ref="editRef" @refreshList="refreshList" :id="props_id" />
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, shallowRef } from 'vue'
import type { Ref } from "vue"
import DataModal from "@/views/users/components/DataModal.vue";
import request from '@/api/users'

const form: {
    phone: string
} = reactive({
    phone: ""
});
type RefArray<T> = Ref<Array<T>>;
const columns: RefArray<object> = ref([{
    title: 'ID',
    dataIndex: 'id',
    ellipsis: true,
    tooltip: true,
    fixed: 'left',
    align: "center"
},
{
    title: '邮箱号',
    dataIndex: 'phone',
    align: "center"
},
{
    title: '余额',
    dataIndex: 'balance',
    align: "center"
},
{
    title: '操作',
    slotName: 'optional',
    align: "center"
}]);
const tableData: RefArray<object> = ref([]);

interface pageTypes {
    total: number,
    current: number,
    pageSize: number,
    showTotal: boolean,
    showJumper: boolean
}
const pagination: pageTypes = reactive({
    total: 1,
    current: 1,
    pageSize: 10,
    showTotal: true,
    showJumper: true
});
const getList = async () => {
    let params = {
        ...form,
        page: pagination.current,
        pageSize: pagination.pageSize
    };
    const { data: { data, total } } = await request.get_list(params);
    tableData.value = data;
    pagination.total = total;
};
getList();
const changePage = (current: number) => {
    pagination.current = current;
    getList();
};

const handlerSearch = () => {
    pagination.current = 1;
    tableData.value = [];
    getList()
};

//放大图片
const img_url: Ref<string> = ref('')
const preview_show: Ref<boolean> = ref(false)
const preview_image = (url: string) => {
    img_url.value = url
    preview_show.value = true
};

const props_id: Ref<number | string> = ref('');
const show: Ref<boolean> = ref(false);
//编辑
interface IPoint {
    id: number
}
const edit = async (record: IPoint) => {
    props_id.value = record.id;
    show.value = true;
};
const editRef = shallowRef<InstanceType<typeof DataModal> | null>(null);
const save = () => editRef.value?.submit();
const refreshList = () => {
    pagination.current = 1;
    show.value = false;
    getList();
};
const delete_item = async (id: number | string) => {
    await request.delete_data({
        ids: [id]
    });
    getList();
};
</script>
<style scope lang="scss">
.main {
    width: 100%;
    padding: 20px;
    background: #fff;
}
</style>